/*
  学习目标：useEffect模拟卸载时
  语法: 
    useEffect(() => {
      //  挂载时执行的内容


      return () => {
        // 卸载时自动执行的回调函数
      }
    }, [])

*/
import React, { useEffect, useState } from "react";

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child />}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 子组件挂载后, 开启定时器.
  useEffect(() => {
    const timerId = setInterval(() => {
      console.log("定时器在跑  ----->  ");
    }, 500);

    // 语法：useEffect接收的回调函数中, 返回一个函数, 返回的函数会在卸载前, 自动执行
    return () => {
      clearInterval(timerId);
    };
  }, []);

  return <div>我是子组件</div>;
}
